跳到主要内容

动画播放器

概述

IdeaXR为用户提供了一个功能丰富且操作简单的动画系统,通过本指南,您将可以:

  • 学会为IdeaXR中所有的元素和节点创建简单的动画
  • 学会利用关键帧来控制动画的运行
  • 创建简单的动画
  • 使用可视化编程等操作进行较为复杂的动画创作

IdeaXR的动画操作都是在动画播放器(AnimalPlayer)中进行的,对于我们提供的各类节点,例如精灵、粒子、可见性、材质的颜色等都可以对其内容设置动画。您还可以修改脚本变量的值,调用任何函数。 先让我们来认识一下动画播放器(AnimalPlayer)的基本操作:

功能使用流程

创建一个动画播放器(AnimalPlayer)

快速创建的入口

在开始创作动画之前,我们必须先创建一个动画播放器(AnimalPlayer)节点。

动画播放器(AnimalPlayer)节点类型是动画的数据容器.一个动画播放器(AnimalPlayer)节点可以保存多个动画, 这些动画可以自动相互转换.

我们可以通过快速创建来创建一个动画播放器(AnimalPlayer)节点

动画播放器(AnimalPlayer)节点


温馨提示

您也可以通过新建node的方式新建一个动画播放器节点。

创建好节点后,我们可以单击新建的动画播放器节点,并打开视窗底部的动画面板.

动画面板位置

动画播放器(AnimalPlayer)的属性

我们单击节点列表中的动画播放器,会在下方显示出其属性

动画播放器属性

  • 动画播放器:一些对动画的操作属性
  • 根节点 :该动画播放器(AnimalPlayer)节点所属根节点的名称,可以更改它当前的根节点为当前场景中的其他节点。
  • 当前动画 :该节点绑定的动画。
  • 暂停:是否暂停该动画播放。
  • 编辑轨道 :该动画播放器(AnimalPlayer)节点是否可以编辑动画。
  • 节点:一些公共节点属性。
  • 暂停模式:如果SceneTree暂停,节点将如何运行。
  • 功能开关:是否开启动画功能。
  • 多人协同:多人交互的通用节点属性。
  • 脚本:节点绑定的脚本属性。

关键帧的创建与使用

要使得我们的节点能够具有动画功能,我们需要在动画轨道上为该节点的某些特定属性设置关键帧。即,关键帧定义了节点属性在某一时间点的值。

如下图所示,动画轨道中菱形代表时间轴中的关键帧。两个关键帧之间的线表示这两帧之间所对应节点属性的值未被更改。

IdeaXR关键帧演示

IdeaXR引擎会在关键帧之间插值,使得关键帧之间的数值随着时间逐渐变化。如下图的红色箭头所示。

只需要两个关键帧就可以获得一个平滑的运动

两个关键帧的平滑运动动画演示


小技巧

当编辑完动画之后,为了能够快速检验动画效果,您可以单击动画轨道上方的播放按钮,此外,您也可以使用快捷键Shift+D播放动画


简单的三维动画示范

在我们了解了动画面板与动画播放器的属性以及最重要的关键帧之后,接下来我们就可以正式开始制作动画效果了!

跟着本指南的步骤,你可以制作出你的第一个简单动画!

1.首先在一个默认场景中,我们创建动画播放器(AnimalPlayer)节点

创建一个动画播放器节点

然后我们选择资源栏—>模型库—>立方体,将一个立方体模型拖拽到场景当中,并在右侧节点栏中将立方体设为动画的子节点

拖拽一个立方体进入场景


小技巧

将动画节点作为子节点添加到AnimationPlayer节点并非强制要求,但是这样做可以很好地区分该场景中的动画节点与非动画节点。


接下来单机动画播放器节点,下方会自动跳转到动画面板,我们新建一个轨道,起名demo

新建轨道

然后在我们制作动画之前,我们先调整一下动画时长。

红色框内的数字为动画播放的时长(左侧的时间条是根据框内的时间来决定长短的)所以一定要先设定动画时长,我们这里设为10秒。

设置动画时长

平移动画

首先单击节点栏的立方体,选择变换—平移这一属性后面的钥匙标志,将这一状态记录

记录当前时刻的立方体平移属性值

此时我们选择动画播放器节点,可以看到动画面板中已经生成了一个关键帧

生成了一个关键帧

然后我们将时间轴向后拖拽,拖到10秒的位置,然后再次单击立方体节点,将立方体移动到一个你喜欢的其他位置,然后再次点击钥匙图标记录当前位置。

生成第二个关键帧

这样就完成了一个平移动画的制作!让我们来运行试试看!运行后发现,我们发现没有观察到立方体运动,为什么呢?

将动画设置为加载后自动播放

单击动画面板,选择动画选项左侧的播放按钮,单击,即可实现加载后自动播放

加载后自动播放

让我们再次运行试一下,太棒了,可以发现我们已经实现了立方体的平滑运动

效果演示

旋转动画

将时间条拖回0秒,单击立方体,选择旋转角度后的钥匙图标,单击记录,然后返回动画播放器节点,可以发现,我们有了两条轨道,并且在两个轨道的0秒处分别有一个关键帧

添加第一个关键帧

这次我们在第8秒处再记录一下旋转角度,将时间轨道条拖动至8秒处,根据自己的喜好进行旋转,然后记录关键帧。

添加第二个关键帧

播放一下看看效果,可以看到方块在缓慢旋转。

平移+旋转效果

如果说只想播放平移和旋转中的一种动画,只需要单击动画面板中对应动画轨道前的对号,将其取消就可以了!

显示/隐藏动画

缩放动画

这次我们从3秒处开始缩放,将时间条拖到3秒处,单击立方体节点,对缩放属性数值进行记录,然后将时间条拖拽到10秒,对其进行缩放,然后记录对应属性值。

设置缩放动画

看一下效果吧!

平移、旋转、缩放效果动画演示

交互编译器中的使用

我们还可以通过交互编译器对动画进行一些流程和播放上的控制,以刚刚制作的立方体动画示例,让我们来使用交互编译器来对其进行一些控制。

选中动画播放器,选择添加脚本,选择可视化脚本

创建交互编辑器脚本

选择IVRVisualScript

选择可视化脚本

然后在左侧逻辑单元中将主任务和动画播放器拖入到界面当中

拖入主任务与动画播放器

单击选中动画播放器,然后在右侧的属性指定刚刚我们制作的动画

指定动画

随后我们将主任务与动画管理器连接起来,一个简单的控制动画的可视化脚本就完成啦!

连接交互编辑器脚本

最后让我们关掉自动播放,看一下效果: 交互编译器控制动画示例

动画面板的详细设置

界面布局和功能介绍

接下来让我们来认识一下动画面板,它主要由四部分组成:

动画面板

  • 动画控件(控制栏):添加、加载、保存和删除动画
  • 轨道列表
  • 带有关键帧的时间轴
  • 时间轴和轨道控件,您可以在其中缩放时间轴和编辑轨道

其他高级设置介绍

相信你通过上面的三维动画实例制作,对于动画编辑器已经有了一定的了解。下面我们就深入动画编辑器,看一看它当中的常用设置细节。

调整动画时长

在下图中的红色框内,可以设置需要的动画时长。此外,最后的“循环”符号表示在动画播放时是否开启循环播放状态。

https://ideavr.top/avatar/help/images/15/image19.png

跟踪设置

每个轨道的末尾都有一个设置面板(见下图)

https://ideavr.top/avatar/help/images/15/image20.png

您可以在其中设置 更新模式 、 轨道插值 以及 循环模式 。

轨道的 更新模式 (下图)告诉IdeaVR何时更新属性值。

https://ideavr.top/avatar/help/images/15/image21.png

它可以是:

  • 连续:更新每个帧的属性值
  • 离散:仅更新关键帧上的属性值
  • 触发器:仅更新关键帧或触发器上的属性值
  • 捕获:将记住属性的当前值,它将与找到的第一个动画键混合

在正常动画中,通常使用"连续"。其他类型用于编写复杂动画的脚本。

轨道插值 告诉IdeaXR如何计算关键帧之间的帧值(下图)。

https://ideavr.top/avatar/help/images/15/image22.png

它支持以下插值模式:

  • 临近:基于最近的关键帧值
  • 线性:基于两个关键帧之间的线性函数计算设置值
  • 三次方:基于两个关键帧之间的三次方函数计算设置值

三次方插值使得物体的运动更加自然,并且动画的速度在关键帧上较慢,在关键帧之间速度较快,三次方插值通常用于角色动画。线性插值更加适合机械运动(如机器人等)。

IdeaXR支持两种 循环模式 (见下图),如果动画设置为循环播放,则该属性会影响动画的播放行为。

https://ideavr.top/avatar/help/images/15/image23.png

  • 切断循环插值器:选择此选项后,动画将在此轨道的最后一个关键帧之后停止。当再次到达第一个关键帧时,动画将重置为其值。
  • 环绕间隔:选择此项后,IdeaXR将计算最后一个关键帧之后的动画,以便再次到达第一个关键帧的值。 其他属性关键帧 IdeaXR不会限制您只编辑三维变换属性,每个属性都可以用作轨道,您可以在节点的属性面板中设置关键帧。 吸附

吸附

IdeaXR的动画面板中提供了吸附功能,它可以设定拖动时间条每拖动一下的时间,例如现在为0.1秒,我们就可以以0.1秒为单位拖动时间条,当然,我们也可以单击关闭吸附,以便让我们更加平滑的调整时间条。

功能应用

制作一个简单的相机动画

通过上面的学习,相信你已经可以自己制作出一些令人耳目一新的动画效果了。下面我们要再介绍一种特殊的动画特效——相机动画。

在虚拟的三维世界中,“相机”是一个特殊的节点,它是我们在虚拟世界中的“眼睛”,没有“相机”节点,我们便无法从屏幕上看到我们想要看到虚拟场景,因此,相机和动画的结合便成为了一种特殊的动画特效。

首先,我们利用快速创建来创建一个相机节点与一个动画播放器节点

添加相机与动画

然后我们随便拖拽一些素材放入到场景当中,作为一个参照物

添加参考物

接下来我们选中播放器,设置一个5秒的动画

设置动画时长为5秒

在IdeaXR的新版本中,我们加入了相机预览功能与将相机移动至主视口画面的便捷功能,通过使用这两个功能,可以使我们更快更好的完成相机动画的制作。

我们移动一下视角,并选中相机,可以看到相机目前的预览图在屏幕的右下角,我们可以通过右上角的相机→移动至主视口画面视角

相机基本操作

这样相机就被我们移动到了当前视角的位置

移动至第一个视角

选中相机的平移与旋转角度属性来设定关键帧

相机动画添加关键帧

然后我们将动画调到第五秒,并且换一个视角,然后进行相同的操作

移动至第二个视角

选中加载后自动播放,然后运行看一下效果:

相机动画演示

这样,我们就完成了一个简单相机动画的制作!